<template>
  <el-header class="header" height="56px">
    <el-tooltip v-if="userStore.account.credentialsNonExpired"
                class="avatar"
                effect="light"
                placement="bottom"
    >
      <el-text class="user" size="large">欢迎,
        <el-text class="user" size="large" tag="b" type="primary">{{ userStore.account.username }}</el-text>
      </el-text>
      <template #content>
        <el-button link @click="logout">退出登录</el-button>
      </template>
    </el-tooltip>
    <el-text v-else class="user" size="large" type="primary" @click="$router.push('/login')">欢迎，请登录</el-text>
  </el-header>
</template>


<script setup>
import {useUserStore} from "@/stores/user"
import {useRouter} from "vue-router";
import {logoutAPI} from "@/apis/login.js";

const userStore = useUserStore()
const router = useRouter()
const logout = () => {
  logoutAPI().then(() => {
    userStore.reset()
    router.push({path: "/login"})
  })
}
</script>

<style lang="scss" scoped>

.header {
  background-color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.user {
  cursor: pointer;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.expand-fade-leave-active {
  margin-left: 20px;
  opacity: 0;
}
</style>